<template>
  <view class="collection_item">
    <image class="top_img" :src="itemObj.imgUrl" />
    <view class="name">{{ itemObj.name }}</view>
    <view class="author">
      <image class="authorImg" :src="itemObj.authorImg" />
      <view class="authorName">{{ itemObj.authorName }}</view>
      <view class="nums">
        <u-icon name="heart" size="14" style="margin-right: 6rpx;"></u-icon>
        {{ itemObj.nums > 999 ? "999+" : itemObj.nums }}</view
      >
    </view>
  </view>
</template>

<script>
export default {
  props: {
    itemObj: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss">
.collection_item {
  width: 100%;
  height: 100%;
  color: #000;
  .top_img {
    width: 352rpx;
    height: 434rpx;
  }
  .name {
    width: 100%;
    height: 96rpx;
    padding: 14rpx;
    box-sizing: border-box;

    font-family: HarmonyOS_Sans_SC_Medium;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .author {
    width: 100%;
    height: 94rpx;
    font-size: 20rpx;
    padding: 16rpx;
    color: #666666;
    display: flex;
    align-items: center;
    .authorImg {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
    }
    .authorName {
      width: 60%;
      margin-left: 6rpx;
      margin-right: 6rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
    }
    .nums {
      display: flex;
      align-items: center;
      width: 30%;
      font-size: 24rpx;
      color: #666666;
    }
  }
}
</style>
